<template>
  <div class="collectlist">
     <WaveItem v-for="(item) in collectList" :key="item.cid" :dataObj="item"></WaveItem>
      <div class="box">
      <Loading noMoreText='没有更多内容了~去其他页面看看吧' :loadShow="loadShow" :noMoreShow="noMoreShow" :loading="loading"></Loading>
    </div>
  </div>
</template>

<script>

import WaveItem from '@/components/wave/waveItem.vue'
import Loading from '@/components/utilView/loadingView.vue'
import { mapState } from 'vuex'
import http from '@/util/http'
import scroll from '@/util/scroll'
export default {
  components: {
    WaveItem,
    Loading
  },
  data () {
    return {
      collectList: [], // 我的收藏数据
      page: 1, // 页码
      noMore: false, // 判断数据是否还有
      isRequest: false, // 网路请求控制
      loadShow: false, // 显示loading页面
      noMoreShow: false, // 没有更多数据提示
      loading: false // 加载中提示
    }
  },
  computed: {
    ...mapState(['user'])
  },
  mounted () {
    window.addEventListener('scroll', this.windowScroll, true) // 监听页面滚动
    http.usermycollect(this.user.uid, this.page).then(res => {
      console.log(res.data)
      this.collectList = res.data.data
      this.page++
    })
  },
  methods: {
    // 实现无限加载更多数据
    // 回调函数
    windowScroll () {
      // 获取三个值

      const scrollTop = scroll.getScrollTop()
      const clientHeight = scroll.getClientHeight()
      const scrollHeight = scroll.getScrollHeight()
      // 距离底部10px时触发
      if (scrollTop + clientHeight + 10 > scrollHeight) {
        // 发送异步请求请求数据，同时携带offset并自增offset
        // noMore是自定义变量，如果是最后一批数据则以后都不加载
        if (!this.isRequest) {
          if (!this.noMore) {
            // isRequest限制请求的次数 上一次请求返回之前不会进行下一次请求 ，阻止发送多次请求
            this.isRequest = true
            // 显示加载中
            this.loadShow = true
            this.loading = true
            http.usermycollect(this.user.uid, this.page).then((res) => {
              this.collectList = this.collectList.concat(res.data.data)
              console.log(this.collectList)
              // 隐藏加载更多提示
              this.loadShow = false
              this.loading = false
              this.isRequest = false
              // 判断是否还有足够数据
              if (res.data.data.length < 10) {
                this.noMore = true
                // 显示没有更多数据
                this.loadShow = true
                this.noMoreShow = true
              }
              // 增加一页
              this.page++
            })
          }
        }
      }
    }
  }
}
</script>

<style>

</style>
